<template>
    
    <el-form :rules="rules" ref="pojoForm" label-width="120px" label-position="right" style="width: 700px;"
    :model="pojo">
    <br><br>
        <el-form-item label="姓名" prop="name" >
            <el-input v-model="pojo.name" ></el-input>
        </el-form-item>
        <el-form-item label="身份证号" prop="idNumber" >
            <el-input v-model="pojo.idNumber" ></el-input>
        </el-form-item>

        <!-- 上传图片-->
        <el-form-item label="上传头像" prop="avatar">
            <el-upload action="http://42.192.3.100:9527/sysFile/fileUpload"
            list-type="picture-card" 
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove" :limit="1"
            :on-success="handleAvatarSuccess"
            :on-exceed="handleExceed"
            :file-list="fileList"
            :show-file-list="true"
            :before-upload="beforeAvatarUpload"
            ref="addpic">
                <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
        </el-form-item>
        
        <el-form-item label="联系电话" prop="phone" >
            <el-input v-model="pojo.phone"></el-input>
        </el-form-item>
        <el-form-item label="身体状态" prop="physicalCondition" >
            <el-select v-model="pojo.physicalCondition" placeholder="身体状况" style="width: 110px">
                <el-option label="正常" value="正常"></el-option>
                <el-option label="普通感冒" value="普通感冒"></el-option>
                <el-option label="呼吸困难腹泻" value="呼吸困难腹泻"></el-option>
           </el-select>
        </el-form-item>
        <el-form-item label="体温" prop="bodyTemperature">
            <el-input  v-model="pojo.bodyTemperature" placeholder="单位:°C     精确到小数点后一位"></el-input>
        </el-form-item>

        <el-form-item label="是否外地流入" prop="isNonlocal" >
            <el-select v-model="pojo.isNonlocal"  style="width: 110px">
                <el-option label="是" :value=1></el-option>
                <el-option label="否" :value=0 selected></el-option>
           </el-select>
        </el-form-item>
        <!-- 级联 -->
        
        <el-form-item label="外地流入区域" v-show="pojo.isNonlocal" prop="province">
            <el-select placeholder="请选择省份" v-model="pojo.province" 
            @change="searchCity(pojo.province)" :value="p">
                <el-option v-for="province in provinces" :key="province.id" 
                :label="province.name" :value="province.id">
                </el-option>
            </el-select>
        </el-form-item>

        <el-form-item  v-show="pojo.isNonlocal" prop="city">
            <el-select placeholder="请选择城市" v-model="pojo.city" :value="c" 
                @change="searchArea(pojo.city)">
                <el-option v-for="city in citys" 
                :key="city.id" 
                :label="city.name" 
                :value="city.id">
                </el-option>
            </el-select>
        </el-form-item>
        
        <el-form-item v-show="pojo.isNonlocal" prop="area" >
            <el-select placeholder="请选择区域" v-model="pojo.area" :value="a">
                <el-option v-for="area in areas" :key="area.id" 
                :label="area.name" :value="area.id">
                </el-option>
            </el-select>
        </el-form-item>


        <!-- address -->
        <el-form-item label="在济地址" prop="address" >
            <el-input v-model="pojo.address"></el-input>
        </el-form-item>

        <!-- date -->
        <el-form-item label="返济日期" prop="date" >
            <el-date-picker style="width: 200px" value-format="yyyy-MM-dd" v-model="pojo.date" type="date" placeholder="返济日期"></el-date-picker>
        </el-form-item>

        

        <el-form-item>
            <el-button type="primary" @click="handleAdd">提交</el-button> 
            <el-button @click="resetForm('pojoForm')">重置</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
import dao from '@/api/dao'



export default {
    data() {
      var price = (rule, value, callback) => {
      const reg = /^\d+.?\d{0,1}$/
      if (!value) {
        callback(new Error('请输入价格'))
      } else if (!Number(value)) {
        callback(new Error('请输入数字值'))
      } else {
        if (reg.test(value)) {
          callback()
        } else {
          callback(new Error('小数点后最多只能输入1位'))
        }
      }
    }
        return {
            pojo:{                 //表单信息
                name:'',
                bodyTemperature:null,     //体温
                physicalCondition:'',   //身体状况
                idNumber:'',     //身份证
                phone:'',  //手机号
                isNonlocal:0, //外地
                province:null,  //省
                city:null,   //市
                area:null,      //区
                date:'', //返济时间
                address:'',//在济地址
                avatar:'',//头像
            },
            p:'',
            c:'',
            a:'',
            /* 级联 */
        
            // options1:[{name:'bug',id:0}],
            // options2: [{name:'bug2',id:2}],
            // options3: [{name:'bug3',id:3}],
            // value1: "",
            // value2: "",
            // value3: "",
            citys:[],
            provinces:[],
            areas:[],
            str1:'',
            str2:'',
            str3:'',
        


            dialogImageUrl: '',//新增图片地址
            fileList:[], //上传文件列表
            dialogVisible: false,    //新增里面图片放大
            
            rules:{
                name:[{ required: true, message: '请输入姓名', trigger: 'blur'}],
                idNumber:[
                    { required: true, message: '请输入身份证号', trigger: 'blur'},
                    {min:18,message:'请输入合理身份证',trigger:'blur'},
                    {max:18,message:'请输入合理身份证',trigger:'blur'}],
                phone: [
                    { required: true, message: "请输入手机号码", trigger: "blur" },
                    { min: 11, max: 11, message: "请输入11位手机号码", trigger: "blur" },
                    {
                        pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
                        message: "请输入正确的手机号码"
                    }
                ],
                physicalCondition:[{ required: true, message: '请输入身体状态', trigger: 'blur'}],
                bodyTemperature:[
                    { required: true, message: '请输入体温', trigger: 'blur'},
                    { required: true, validator: price, trigger: 'blur' }
                   
                ],
                isNonlocal:[{ required: true, message: '请输入', trigger: 'blur'}],
                date:[{ required: true, message: '请输入', trigger: 'blur'}],
                address:[{ required: true, message: '请输入', trigger: 'blur'}],
                avatar:[{ required: true, message: '请输入', trigger: 'blur'}],

            },

            

        }
    }, 
    created(){
        /* 
            一载入就要查询出所有的省份 
            如果传递0则表示查询所有省份
        */
        dao.searchCity('0')
            .then(response=>{
                const resp = response.data
                if(resp.flag){
                    /* 赋值给data中初始化的provinces空数组 */
                    this.provinces = resp.data
                }
            })
    },
    methods:{
        /* 级联 */
       
        searchCity(pid){
            
            /* 清空城市 */
            this.pojo.city = null,
            /* 清空区域 */
            this.pojo.area = null,
            /* 注意此处是防止更换省份之后，虽然需要重新选择市区，但是区域下面依然
            残留上次选择的区 */
            this.areas = [],
            this.str1 = pid+'',
            
            dao.searchCity(this.str1).then(response=>{
                const resp = response.data
                if(resp.flag){
                    this.citys = resp.data
                }
            }) 
        },
        searchArea(pid){ 
            /* 清空区域 */
            this.pojo.area = null,
            this.str2 = pid+'',
            dao.searchCity(this.str2).then(response=>{
                const resp = response.data
                if(resp.flag){
                    this.areas = resp.data
                }
            })                
        },

        /* 重置 */
        resetForm(formName) {
            this.$refs[formName].resetFields()

        },
        
        handleAdd(){
            this.addData('pojoForm')
            this.$nextTick(() => { 
                this.$refs['pojoForm'].resetFields()
                this.$refs.addpic.clearFiles()
            })
        },

        
        /* 新增信息 */
        addData(formName){
            this.$refs[formName].validate((valid) => {
                if (valid){
                    this.provinces.forEach(province => {
                        if(province.id === this.pojo.province) {
                           this.p = province.name
                        }
                    });

                    this.citys.forEach(city => {
                        if(city.id === this.pojo.city) {
                           this.c = city.name
                        }
                    });
                    this.areas.forEach(area => {
                        if(area.id === this.pojo.area) {
                           this.a = area.name
                        }
                    });


                    /* 外地输入 */
                    if(this.pojo.isNonlocal){      
                        dao.add1(
                            this.pojo.name,
                            this.pojo.idNumber,
                            this.pojo.phone,
                            this.pojo.physicalCondition,
                            this.pojo.bodyTemperature,
                            this.pojo.isNonlocal,
                            this.pojo.date,
                            this.pojo.address,
                            this.pojo.avatar,
                            this.p,
                            this.c,
                            this.a
                        ).then(response=>{
                            const resp = response.data
                            /* 成功 */
                            if(resp.flag){
                                this.$message({
                                    message: resp.msg,
                                    type: 'success'
                                })
                            /* 失败 */
                            }else{
                                this.$message({
                                message:resp.msg,
                                type:'warning',
                                })
                            }
                        })
                    /* 本地输入 */
                    }else{
                        dao.add0(
                            this.pojo.name,
                            this.pojo.idNumber,
                            this.pojo.phone,
                            this.pojo.physicalCondition,
                            this.pojo.bodyTemperature,
                            this.pojo.isNonlocal,
                            this.pojo.date,
                            this.pojo.address,
                            this.pojo.avatar
                        ).then(response=>{
                            const resp = response.data
                            if(resp.flag){
                                this.$message({
                                    message: resp.msg,
                                    type: 'success'
                                })
                            }else{
                                this.$message({
                                message:resp.msg,
                                type:'warning',
                                })
                            }
                        }) 
                    }
                /* 验证没通过 */    
                }else{
                    this.$message({
                    message:'填写有误！',
                    type:'warning',
                    })
                }
            })           
        },
    
        /* 文件上传相关 */
        handleRemove(file, fileList) {
  
            this.pojo.avatar = ''
        },

        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
       
        handleAvatarSuccess(response, file, fileList){
            
            if(response.flag){
                this.pojo.avatar = response.data.path  
            }
  
        },
        handleExceed(file,fileList){
            this.$message.error('最多传递一张图片！');
        },

        beforeAvatarUpload(file){
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024  < 500;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
                
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 500KB!');
            }
            return isJPG && isLt2M;
        }, 
        /* 文件上传结束 */

        
    }

}
</script>

<style>

   
</style>

